<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="" id="app">

        <div class="">
            name:<input type="text" v-model.trim="value.name" @keyup.enter="doAdd">
            <button @click="doAdd">添加</button>
        </div>

        <div class="">
            <h3 class="">未完成 <span>{{sum}}</span></h3>
            <div class="" v-for="item of arr" :key="item.name" v-show="!item.state">
                <input type="checkbox" v-model="item.state" >{{item.name}}
                <button @click="doDel(item.name)">删除</button>
            </div>
        </div>

        <div class="">
            <h3 class="">完成 <span>{{arr.length-sum}}</span></h3>
            <div class="" v-for="item of arr" :key="item.name" v-show="item.state">
                <input type="checkbox" v-model="item.state" >{{item.name}}
                <button @click="doDel(item.name)">删除</button>
            </div>
        </div>

    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                value:{
                    name:"",
                    state:false,
                },
                arr:[
                    {name:"html",state:false,id:1001},
                    {name:"css",state:true,id:1002},
                    {name:"js",state:false,id:1003},
                ],
                num:0
            },
            watch:{
                arr:{}
            },
            // 当data中参与计算的值发生改变的时候会触发
            computed:{
                sum(){
                    return this.arr.filter(res=>!res.state).length
                },
            },
            methods:{
                doAdd(){
                    var value = this.value;
                    if(this.arr.every(res=>res.name!=value.name)){
                        var obj = Object.assign({},value);
                        this.arr.unshift(obj);
                    }else{
                        alert("数据重复")
                    }
                    // this.num = this.deal();
                },
                doDel(name){
                    this.arr.forEach((res,index)=>{
                        if(res.name == name){
                            this.arr.splice(index,1);
                        }
                    })
                    // this.num = this.deal();
                }
            }
        })
    </script>
</body>
</html>